<template>
    <div>
        <div class="find_top">
        <Settingheader :titletext="out" :backpage="ao"></Settingheader>
        <!--<div class="seek">
            <img src="../../../images/icon_BANNER_5.png" alt="">
        </div>-->
            <!--<h1>腮红</h1>-->
        </div>

        <div class="demo">
            <div class="content">
                <div class="img"><img src="../../../images/IMG_shangpingye_01.png" alt=""></div>
                    <p class="title">娇兰 限量款焕彩流星天使腮红</p>
                    <div class="bottom">
                    <div class="mary clearfix">参考价: ￥420 <span class="advices clearfix"><div class="num">245</div><img src="../../../images/Icon_wpfaqidejindian_talk.png" alt=""></span></div> 
                </div>
            </div>
            
            <router-link to="productcon">
                <div class="content">
                    <div class="img"><img src="../../../images/IMG_shangpingye_01.png" alt=""></div>
                        <p class="title">娇兰 限量款焕彩流星天使腮红</p>
                        <div class="bottom">
                        <div class="mary clearfix">参考价: ￥420 <span class="advices clearfix"><div class="num">245</div><img src="../../../images/Icon_wpfaqidejindian_talk.png" alt=""></span></div> 
                    </div>
                </div>
            </router-link>  
        </div>

        <div class="main">
            <div class="content">
                <div class="img"><img src="../../../images/IMG_shangpingye_01.png" alt=""></div>
                    <p class="title">娇兰 限量款焕彩流星天使腮红</p>
                    <div class="bottom">
                    <div class="mary clearfix">参考价: ￥420 <span class="advices clearfix"><div class="num">245</div><img src="../../../images/Icon_wpfaqidejindian_talk.png" alt=""></span></div> 
                </div>
            </div>

            <div class="content">
                <div class="img"><img src="../../../images/IMG_shangpingye_01.png" alt=""></div>
                    <p class="title">娇兰 限量款焕彩流星天使腮红</p>
                    <div class="bottom">
                    <div class="mary clearfix">参考价: ￥420 <span class="advices clearfix"><div class="num">245</div><img src="../../../images/Icon_wpfaqidejindian_talk.png" alt=""></span></div> 
                </div>
            </div>
        </div>

        <div class="main">
            <div class="content">
                <div class="img"><img src="../../../images/IMG_shangpingye_01.png" alt=""></div>
                    <p class="title">娇兰 限量款焕彩流星天使腮红</p>
                    <div class="bottom">
                    <div class="mary clearfix">参考价: ￥420 <span class="advices clearfix"><div class="num">245</div><img src="../../../images/Icon_wpfaqidejindian_talk.png" alt=""></span></div> 
                </div>
            </div>

            <div class="content">
                <div class="img"><img src="../../../images/IMG_shangpingye_01.png" alt=""></div>
                    <p class="title">娇兰 限量款焕彩流星天使腮红</p>
                    <div class="bottom">
                    <div class="mary clearfix">参考价: ￥420 <span class="advices clearfix"><div class="num">245</div><img src="../../../images/Icon_wpfaqidejindian_talk.png" alt=""></span></div> 
                </div>
            </div>
        </div>

        
        
    </div>
    
</template>

<script>
    import Settingheader from "../../../components/settingheader"
    export default {
    name:'blusher',
    data(){
        return{
            out:'腮红',
            ao:'/type'
        }
    },
    components:{
        Settingheader
    }
}
</script>

<style lang="less" scoped>
.find_top{
  width:100%;
  text-align: center;
  height:306/75rem;
  background:#ff406f;
  margin-bottom:240/75rem;
    h1{
      color:#fff;
      font-size:40/75rem;
      padding-top:36/75rem;
    }

    .seek{
        position:absolute;
    //   float:left;
      margin-left:20/75rem;
      padding-top:20/75rem;
      
    }
}
.demo{
  position:absolute;
  width:650/75rem;
  height:338/75rem;
  // border:solid 1px black; 
  border-radius:16/75rem;
  box-shadow: 5px -5px 50px #888888;
  background:#fff;
  top:168/75rem;
  left:0;
  right:0;
  margin: 0 auto;
  overflow: hidden;

  .content{
    //   width:318/75rem;
    //   height:316/75rem;
      float:left;
      
      .img{
          img{
              width: 318/75rem;
              height: 236/75rem;
          }
      }
  }

  .content:last-child{
      float:right;
  }
  .title{
      margin-top:8/75rem;
      margin-left:16/75rem;
      font-size:18/75rem;
  }


  .mary{
      width:100%;
      font-size:18/75rem;
      margin-top:12/75rem;      
      margin-left:16/75rem;    
      float:left;  
    
    .advices{
      font-size:18/75rem;
      float:right;
      margin-right:24/75rem;
    }
    .num{
      float:right;
      margin-left:4/75rem;
      
    }
  }

}

.main{
//   position:absolute;
  
  width:650/75rem;
  height:338/75rem;
  // border:solid 1px black; 
  border-radius:16/75rem;
  box-shadow: 5px -5px 50px #888888;
  background:#fff;
  top:168/75rem;
  left:0;
  right:0;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom:38/75rem;
  .content{
      width:318/75rem;
      height:316/75rem;
      float:left;

      .img{
          img{
              width: 318/75rem;
              height: 236/75rem;
          }
      }
  }

  .content:last-child{
      float:right;
  }
  .title{
      margin-top:8/75rem;
      margin-left:16/75rem;
      font-size:18/75rem;
  }


  .mary{
      width:100%;
      font-size:18/75rem;
      margin-top:12/75rem;      
      margin-left:16/75rem;    
      float:left;  
    
    .advices{
      font-size:18/75rem;
      float:right;
      margin-right:24/75rem;
    }
    .num{
      float:right;
      margin-left:4/75rem;
    }
  }

}

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}
.clearfix {
  zoom: 1;
}
</style>